$container:1280;
@media screen and (max-width: 1280px){
  .sh.container{ width: 100%;background: red}
  .sh.texts >.sh.column{ .sh.item{  height: auto  }}
}

//ipad
@media screen and (max-width: 769px){

  .sh.container{ width: 100%}
  body{ font-size: 12px;}
  //16column imgList
  $screen:768;
  //2,3  2list
  .sh.column2.pic >.sh.column{  flex: 0 0 50%; }
  .sh.column3.pic >.sh.column{ flex: 0 0 50%;  }

  //4,5  3list
  .sh.column4.pic >.sh.column{  flex: 0 0 33.333333333333%; }
  .sh.column5.pic >.sh.column{ flex: 0 0 33.333333333333%;  }

  //6,7 4list
  .sh.column6.pic >.sh.column{  flex: 0 0 25%;  }
  .sh.column7.pic >.sh.column{  flex: 0 0 25%; }

  //8,9 5list
  .sh.column8.pic >.sh.column{  flex: 0 0 20%; }
  .sh.column9.pic >.sh.column{  flex: 0 0 20%; }

  //texts
  .sh.texts >.sh.column{ .sh.item{  height: auto  }}
  //2,3  2list
  .sh.column2.texts >.sh.column{  flex: 0 0 100%; }
  .sh.column3.texts >.sh.column{ flex: 0 0 100%;}

  //4,5  3list
  .sh.column4.texts >.sh.column{  flex: 0 0 50%;}
  .sh.column5.texts >.sh.column{ flex: 0 0 50%;}

  //6,7 4list
  .sh.column6.texts >.sh.column{  flex: 0 0 33.333333333333%;}
  .sh.column7.texts >.sh.column{  flex: 0 0 33.333333333333%;}

  //8,9 5list
  .sh.column8.texts >.sh.column{  flex: 0 0 25%;}
  .sh.column9.texts >.sh.column{  flex: 0 0 25%;}
}


//iphone
@media screen and (max-width: 360px){
  //img
  //2,3  1list
  .sh.column2.pic >.sh.column{  flex: 0 0 100%;  }
  .sh.column3.pic >.sh.column{  flex: 0 0 100%;  }

  //4,5  2list
  .sh.column4.pic >.sh.column{  flex: 0 0 50%; }
  .sh.column5.pic >.sh.column{  flex: 0 0 50%; }

  //6,7  3list
  .sh.column6.pic >.sh.column{  flex: 0 0 33.333333333333%;  }
  .sh.column7.pic >.sh.column{  flex: 0 0 33.333333333333%; }

  //8,9 4list
  .sh.column8.pic >.sh.column{  flex: 0 0 25%;}
  .sh.column9.pic >.sh.column{  flex: 0 0 25%;}


  //text
  .sh.texts >.sh.column{ .sh.item{  height: auto  }}
  //2,3  1list
  .sh.column2.texts >.sh.column{  flex: 0 0 100%;}
  .sh.column3.texts >.sh.column{  flex: 0 0 100%;}

  //4,5  1list
  .sh.column4.texts >.sh.column{  flex: 0 0 100%;}
  .sh.column5.texts >.sh.column{  flex: 0 0 100%;}

  //6,7  2list
  .sh.column6.texts >.sh.column{  flex: 0 0 50%;}
  .sh.column7.texts >.sh.column{  flex: 0 0 50%;}

  //8,9 2list
  .sh.column8.texts >.sh.column{  flex: 0 0 50%;}
  .sh.column9.texts >.sh.column{  flex: 0 0 50%;}
}

